<template>
  <el-row style="height: 100%; width: 100%;" class="login">
      <el-col :span="consultantSpan" key="consultant">
        <AnimatedBackground @updateSpan="handleSpanUpdate" />
      </el-col>
      <el-col :span="adminSpan" key="admin">
        <SimpleCSSWaves @updateSpan="handleSpanUpdate" />
      </el-col>
  </el-row>
</template>

<script>
import SimpleCSSWaves from '@/components/SimpleCSSWaves.vue';
import AnimatedBackground from '@/components/AnimatedBackground.vue';

export default {
  components: {
    SimpleCSSWaves,
    AnimatedBackground
  },
  data() {
    return {
      consultantSpan: 12,
      adminSpan: 12
    };
  },
  methods: {
    handleSpanUpdate(role) {
      if (role === 'consultant') {
        this.consultantSpan = 24;
        this.adminSpan = 0;
      } else if (role === 'admin') {
        this.consultantSpan = 0;
        this.adminSpan = 24;
      } else if (role === 'reset') {
        this.consultantSpan = 12;
        this.adminSpan = 12;
      }
    }
  }
}
</script>

<style scoped lang="less">
.login {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 60%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .form {
    width: 35%;
    background-color: #fff;
    padding: 40px 25px;
    text-align: center;

    .form-title {
      margin-bottom: 60px;
      color: #555;
    }
  }

  .code-class {
    display: flex;
    align-items: center;
    font-size: 14px;

    .code-label {
      text-align: right;
      padding-right: 10px;
    }
  }
}

/* 添加动画效果 */
.col-width-enter-active,
.col-width-leave-active {
  transition: width 0.5s ease;
}

.col-width-enter,
.col-width-leave-to {
  width: 0 !important;
}
</style>